<template>
  <div class="wrapper flex-col justify-center"  ref="icon" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <svg v-if="!isHttp" :style="iconStyle" class="icon"  aria-hidden="true">
      <use :xlink:href="`#${icon}`"></use>
    </svg>
    <div v-if="isHttp" class="img " :style="imgStyle">
      <img :src="this.icon" alt="" class="avatar">
    </div>
  </div>
</template>

<script>
export default {
  name: "WIcon",
  data: () => ({
    isHover: false
  }),
  props: {
    icon: {
      type: String,
      default: "icon-queshi"
    },
    size: {
      default: "16px"
    },
    color: {
      type: String
    },
    hoverColor: {
      type: String
    },
    hoverCursor: {
      type: String
    },
    borderRadius:{
      type: [Number, String],
      default: "50%"
    }
  },
  computed:{
    iconStyle() {
      let fontSize
      if(typeof this.size === "number"){
        fontSize = this.size + "px"
      }else {
        fontSize = this.size.endsWith("px") ? this.size : this.size + "px"
      }
      return {
        fontSize,
        fill: this.isHover && this.hoverColor ? this.hoverColor : this.color,
        cursor: this.isHover  ? this.hoverCursor : ""
      }
    },
    isHttp() {
      return this.icon.startsWith("http")
    },
    imgStyle() {
      let size
      if(typeof this.size === "number"){
        size = this.size + "px"
      }else {
        size = this.size.endsWith("px") ? this.size : this.size + "px"
      }
      return {
        width: size,
        height: size,
        borderRadius: typeof this.borderRadius === "number" ? this.borderRadius + "px" : this.borderRadius

      }
    },
  },
  methods:{
    handleMouseEnter() {
      this.isHover = true
    },
    handleMouseLeave() {
      this.isHover = false
    }
  }

}
</script>

<style scoped lang="scss">
.wrapper{
  display: inline;
  /*display: inline;
  vertical-align: bottom;*/
}
.img{
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  .avatar{
    width: 100%;
    height: 100%;
  }
}

</style>
